<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Opanorama - H5全景</title>
    <meta name="keywords" content="ThreeJS,全景,移动端,js库,手势,陀螺仪">
    <meta name="description" itemprop="description" content="Opanorama是一个同时支持手势和陀螺仪的web全景的JS库">
    <meta name="viewport" id="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
    <style>
        * {
            margin: 0;
            padding: 0;
            outline: 0;
            letter-spacing:140%;
            font-family: "Microsoft YaHei";
        }

        .panorama{
            position: absolute;
            z-index: 0;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="panorama"></div>
<script>
    var ua = navigator.userAgent || '';
    var isMobile = ua.match(/(iPad).*OS\s([\d_]+)/)
                 ||ua.match(/(iPhone\sOS)\s([\d_]+)/)
                 ||ua.match(/Android/);
</script>
<script src="./three.js"></script>
<script src="./dist/Opanorama.js"></script>
<script>
(function(){
    var longitude = 0,mark='add';
    new Opanorama({
        offsetLongitude: 0,         
        offsetLatitude: 90,
        fov: 90,
        url:  './res/'+(isMobile?Math.floor((Math.random()*3)):'view2')+'.jpg',
        container: document.querySelector('.panorama'),
        onFrame:function(lon, lat) {
            if(isMobile){
                return;
            }
            if(longitude ==360){
                mark = 'sub';
            }
            if(longitude === 0){
                mark = 'add';
            }

            switch(mark){
                case 'add':
                    longitude += 0.05;
                    break;
                case 'sub':
                    longitude -= 0.05;
                    break;    
            }
            return {lon: lon + longitude,lat: -90}
        }
    });
})();
</script>
</body>
</html>